﻿<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ViewModel="using:TestApp.ViewModel"
    xmlns:Triggers="using:WinRT.Triggers" mc:Ignorable="d">
    
    <Page.Resources>
        <ViewModel:PersonViewModel x:Key="ViewModel" />
        <Storyboard x:Name="FlashNameChanged">
        	<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
        		<EasingColorKeyFrame KeyTime="0" Value="#FFFF2929"/>
        		<EasingColorKeyFrame KeyTime="0:0:2" Value="White"/>
        	</ColorAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock">
        		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<BackEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ElasticEase/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="textBlock">
        		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.45">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<BackEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ElasticEase/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBlock">
        		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.65">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<BackEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ElasticEase/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <local:BoolToVisibilityConverter x:Name="boolToVisibilityConverter" />
        <Storyboard x:Name="Hannah">
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="face">
        		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="face">
        		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.35"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>
    <Page.TopAppBar>
        <AppBar>
            <Border Height="50" Background="Yellow"
                    DataContext="{StaticResource ViewModel}">
                <Triggers:Interactions.Triggers>
                    <Triggers:PropertySetTrigger Binding="{Binding Person.IsHappy}" RequiredValue="true">
                        <Triggers:SetPropertyAction PropertyName="Background" >
                            <Triggers:SetPropertyAction.Value>
                                <SolidColorBrush Color="Blue" />
                            </Triggers:SetPropertyAction.Value>
                        </Triggers:SetPropertyAction>
                    </Triggers:PropertySetTrigger>
                    <Triggers:PropertySetTrigger Binding="{Binding Person.IsHappy}" RequiredValue="false">
                        <Triggers:SetPropertyAction PropertyName="Background" >
                            <Triggers:SetPropertyAction.Value>
                                <SolidColorBrush Color="Red" />
                            </Triggers:SetPropertyAction.Value>
                        </Triggers:SetPropertyAction>
                    </Triggers:PropertySetTrigger>
                </Triggers:Interactions.Triggers>
                <TextBlock Foreground="Black" FontSize="30">
                    <Run Text="Person is happy:" />
                    <Run Text="{Binding Person.IsHappy}" />
                </TextBlock>
            </Border>
        </AppBar>
    </Page.TopAppBar>

    <Grid x:Name="grd" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource ViewModel}">
        <Triggers:Interactions.Triggers>
            <Triggers:StoryboardCompletedTrigger Storyboard="{StaticResource FlashNameChanged}">
                <Triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource Hannah}"></Triggers:ControlStoryboardAction>
            </Triggers:StoryboardCompletedTrigger>
            <Triggers:PropertyChangedTrigger Binding="{Binding Person.Name}">
                <Triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FlashNameChanged}" />
                <Triggers:SetPropertyAction Target="{Binding}" PropertyName="ChangeCount" Value="{Binding NextChangeCount}"></Triggers:SetPropertyAction>
            </Triggers:PropertyChangedTrigger>
			<Triggers:PropertySetTrigger Binding="{Binding Person.Name}" RequiredValue="Hannah">
                <Triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource Hannah}" />
            </Triggers:PropertySetTrigger>
            <Triggers:PropertySetTrigger Binding="{Binding Person.IsHappy}" RequiredValue="true">
                <Triggers:GotoStateAction StateName="Happy" />
            </Triggers:PropertySetTrigger>
            <Triggers:PropertySetTrigger Binding="{Binding Person.IsHappy}" RequiredValue="false">
                <Triggers:GotoStateAction StateName="Sad" />
            </Triggers:PropertySetTrigger>
            <Triggers:EventTrigger EventName="PropertyChanged" SourceObject="{Binding}">
                <Triggers:ControlStoryboardAction Storyboard="{StaticResource Hannah}" Action="Start"></Triggers:ControlStoryboardAction>
            </Triggers:EventTrigger>
        </Triggers:Interactions.Triggers>

        <VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="HappySad">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1">
    					<VisualTransition.GeneratedEasingFunction>
    						<CubicEase EasingMode="EaseInOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="Happy"/>
    			<VisualState x:Name="Sad">
    				<Storyboard>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse1" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse1" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FF677FD3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0:0:1" To="-1.036" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="path" d:IsOptimized="True"/>
    					<DoubleAnimation Duration="0:0:1" To="-2.494" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path" d:IsOptimized="True"/>
    					<ColorAnimation Duration="0:0:1" To="#FFADD6FF" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="343*" />
            <ColumnDefinition Width="1023*" />
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <StackPanel Grid.RowSpan="2">
                <TextBox Text="{Binding Person.Name, Mode=TwoWay}" />
            <Button Command="{Binding MakeHappy}" Content="Make happy..." Visibility="{Binding Person.IsHappy, Converter={StaticResource boolToVisibilityConverter}, ConverterParameter=NOT}" />
            <Button Command="{Binding MakeSad}" Content="Make sad..." Visibility="{Binding Person.IsHappy, Converter={StaticResource boolToVisibilityConverter}}" />
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="18" Text="Name has been changed" Margin="0,3,3,3" />
                <TextBlock FontSize="18" Text="{Binding ChangeCount}" Margin="3" />
                <TextBlock FontSize="18" Text="time(s)" Margin="3"></TextBlock>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" FontSize="18">Allow clicking on face:</TextBlock>
                <CheckBox x:Name="allowClicking" IsChecked="{Binding AllowFaceToggling, Mode=TwoWay}" />
            </StackPanel>
            <TextBlock Text="Demonstrated interactions:" FontSize="13.333" Margin="0,30,0,0"/>
            <TextBlock TextWrapping="Wrap" Margin="0,10,0,0" FontSize="13.333">
            	<Run Text="1) "/>
            	<Run Foreground="#FFFF2727" Text="PropertyChangedTrigger"/>
            	<Run Text="/"/>
            	<Run Foreground="#FFFFBD30" Text="ControlStoryBoardAction"/>
            	<Run Text=":"/>
            	<LineBreak/>
            	<Run/>
            	<Run Text="Change the name above (tab off) - Property change initiates storyboard, flashing the name on the right"/>
            </TextBlock>
            <TextBlock TextWrapping="Wrap" Margin="0,10,0,0" FontSize="13.333">
            	<Run Text="2) "/>
            	<Run Foreground="#FFFF2727" Text="PropertySetTrigger"/>
            	<Run Text="/"/>
            	<Run Foreground="#FFFFBD30" Text="GotoStateAction"/>
            	<Run Text=":"/>
            	<LineBreak/>
            	<Run/>
            	<Run Text="Click the Make happy/Make sad button above to change the &quot;happy&quot; state of the person. The property changing to the various values changes the visual state of the face."/>
            </TextBlock>
            <TextBlock TextWrapping="Wrap" Margin="0,10,0,0" FontSize="13.333">
            	<Run Text="3) "/>
            	<Run Foreground="#FFFF2727" Text="EventTrigger"/>
            	<Run Text="/"/>
            	<Run Foreground="#FFFFBD30" Text="InvokeCommandAction"/>
            	<LineBreak/>
            	<Run Text="Click/touch the face - this invokes a command to toggle the happy state of the person (which ends up triggering the state change described above)"/>
            	<LineBreak/>
            	<Run Text="This also has a condition applied to it such that the command will only be invoked if "/>
            	<Run Text="the "/>
            	<Run Text="&quot;AllowClickingOnFace&quot; property is true."/>
            </TextBlock>
            <TextBlock TextWrapping="Wrap" Margin="0,10,0,0" FontSize="13.333">
            	<Run Text="4) "/>
            	<Run Foreground="#FFFF2727" Text="StoryboardCompletedTrigger"/>
            	<LineBreak/>
            	<Run Text="Every time the name flash storyboard completes, a subsequent storyboard will be triggered, manipulating the face."/>
            </TextBlock>
        </StackPanel>
        
        <StackPanel Grid.Column="1">
            <StackPanel Orientation="Horizontal">
        		<TextBlock Margin="0,0,2,0" Text="Hey" FontSize="53.333"/>
        		<TextBlock x:Name="textBlock" Text="{Binding Person.Name, Mode=OneWay}" FontSize="53.333" Margin="14,0,0,0" RenderTransformOrigin="0.5,0.5">
        			<TextBlock.RenderTransform>
        				<CompositeTransform/>
        			</TextBlock.RenderTransform>
        		</TextBlock>
        		<TextBlock Margin="0,0,2,0" Text="!" FontSize="53.333"/>
        	</StackPanel>
            <Viewbox Height="274" Margin="287,0,486,0">
            	<Canvas x:Name="face" Height="50" Width="50" RenderTransformOrigin="0.5,0.5">
            		<Canvas.RenderTransform>
            			<CompositeTransform/>
            		</Canvas.RenderTransform>
            		<Triggers:Interactions.Triggers>
            			<Triggers:EventTrigger EventName="Tapped">
                            <Triggers:InvokeCommandAction Command="{Binding ToggleHappySad}" PassEventArgsToCommand="True">
                                <Triggers:Condition LeftOperand="{Binding AllowFaceToggling}" Operator="Equals" RightOperand="True" />
                            </Triggers:InvokeCommandAction>
                        </Triggers:EventTrigger>
            		</Triggers:Interactions.Triggers>
                
            		<Ellipse x:Name="ellipse" Width="50" Height="50" Stroke="#FF575B06" Fill="#FFFBFFAD" StrokeThickness="2" />
            		<Ellipse x:Name="ellipse1" Fill="#FF575B06" Height="11" Canvas.Left="14" Stroke="#FF575B06" StrokeThickness="2" Canvas.Top="13" Width="7"/>
            		<Ellipse x:Name="ellipse2" Fill="#FF575B06" Height="11" Canvas.Left="28" Stroke="#FF575B06" StrokeThickness="2" Canvas.Top="13" Width="7"/>
            		<Path x:Name="path" Data="M9.5,32.1667 C9.5,32.1667 10.1664,43.7499 21.0832,43.7499 C32,43.7499 32.8336,31.9995 32.8336,31.9995" Height="13.75" Canvas.Left="12.333" Stretch="Fill" Stroke="#FF575B06" StrokeThickness="2" Canvas.Top="30.333" UseLayoutRounding="False" Width="25.333" RenderTransformOrigin="0.5,0.5">
            			<Path.RenderTransform>
            				<CompositeTransform/>
            			</Path.RenderTransform>
            		</Path>
            	</Canvas>
            </Viewbox>
            <StackPanel Orientation="Horizontal" Margin="10,10,0,0">
                <TextBlock>You last clicked at:</TextBlock>
                <TextBlock Text="{Binding LastClickEvent}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>
